<template>

  <!-- 技术评定 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 23%;height: 84vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <h6 class="l_title-s">技术状况评定等级统计</h6>
      <div class="assess_total">
        <div style="width: 38%;" v-for="item in countList" :key="item.name">
          <div @click="onChange(item)"  :class="currentActive === item.name ? 'init_button_is' : 'init_button'" >
            <el-row   style="display: flex;align-items: center;justify-content: center;height:3vw">
              <el-col span="14" style="text-align: center">
                <img style="width:2.5rem;" v-if="item.name=='未进行技术评定'" src='../imgs/wei.png'>
                <img style="width: 2.5rem;" v-else-if="item.name=='1类'" src='../imgs/01.png'>
                <img style="width: 2.5rem;" v-else-if="item.name=='2类'" src='../imgs/02.png'>
                <img style="width: 2.5rem;" v-else-if="item.name=='3类'" src='../imgs/03.png'>
                <img style="width: 2.5rem;" v-else-if="item.name=='4类'" src='../imgs/04.png'>
                <img style="width: 2.5rem;" v-else-if="item.name=='5类'" src='../imgs/05.png'>

              </el-col>
              <el-col span="14" style="">
                <p style="color: white;margin: 4% 0;width: 90%">{{item.name}}</p>

                <p style="color: #c600ff;" v-if="item.name=='未进行技术评定'">{{item.num}}</p>
                <p style="color: #00ff30" v-else-if="item.name=='1类'">{{item.num}}</p>
                <p style="color: #0072ff" v-else-if="item.name=='2类'">{{item.num}}</p>
                <p style="color: #e4ff00" v-else-if="item.name=='3类'">{{item.num}}</p>
                <p style="color: #ffa200" v-else-if="item.name=='4类'">{{item.num}}</p>
                <p style="color: #ff0000" v-else-if="item.name=='5类'">{{item.num}}</p>
              </el-col>

            </el-row>

          </div>
        </div>
      </div>
      <dv-decoration-10 style="width:100%;height:5px;margin:24px 0"/>
      <h6 class="l_title-s">各路线{{currentActive}}边坡数量排行</h6>
      <div class="left_paihang">
        <dv-scroll-ranking-board :config="leftTableConfig" class="dv_table_left"/>
      </div>
    </dv-border-box-13>

    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 23%;height: 84vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <dv-decoration-1 class="board_page-right-d" style="width:200px;height:40px;"/>
      <h6 class="l_title-s">最新技术状况评定</h6>
      <dv-scroll-board :config="rightTableConfig" @click="click" class="dv_table_right"/>
    </dv-border-box-13>
  </div>
</template>

<script>
  import {technicalEvaluationCount, technicalEvaluationInfo} from '@/services/model/data-board'
  import Format from '@/utils/format'

  export default {
    data() {
      return {
        image01: require("../imgs/03.png"),
        showLoading: true,
        // 总数统计
        countList: [],
        // 当前激活的图表
        currentActive: '',
        charts: null,
        // 右边列表
        rightTableList: [],
        leftTable: [],
      }
    },
    computed: {
      leftTableConfig() {
        return {
          data: this.leftTable.map(x => ({name: x.name, value: x.num})),
          rowNum: 12,
        }
      },
      rightTableConfig() {
        return {
          header: ['', '位置', '评定日期', '等级', ''],
          data: this.rightTableList.map(x => [x, `<p class="davav_p" title="${x.location}">${x.location}</p>`, Format(x.checkTime ? new Date(x.checkTime) : '', 'yyyy-MM-dd'), x.damageName, '查看']),
          headerBGC: '#22314B',
          oddRowBGC: '#162036',
          evenRowBGC: '#222B40',
          rowNum: 12,
          headerHeight: 40,
          //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
          columnWidth: ['0px;padding:0', 340, 200, '80px;color:#8dfef6;', '100px;color: #1990FE;']
        }
      }
    },
    methods: {
      click(data) {
        let row = data.row[0]
        // this.$router.push({
        //   path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
        // });
      },
      // 技术评定-最近数据轮播(TOP20)
      async queryRightList(deptTreeId, roadId) {
        const {data} = await technicalEvaluationInfo({deptTreeId, roadId})
        this.rightTableList = data || []
      },
      // 类型切换
      onChange(item) {
        this.currentActive = item.name
        this.leftTable = item.itemList || []
        this.$emit('changeMap', item.code)
      },
      // 路线改变
      refresh(deptTreeId, roadId) {
        this.queryLeftList(deptTreeId, roadId)
        this.queryRightList(deptTreeId, roadId)
        this.$emit('changeMap')
      },
      // 查询数据
      async queryLeftList(deptTreeId, roadId) {
        const {data} = await technicalEvaluationCount({deptTreeId, roadId})
        this.countList = data.itemList || []
        let init = data.itemList.filter((x) => x.num > 0);
        let initItem = init[0] || data.itemList[0]
        this.currentActive = initItem.name
        this.leftTable = initItem.itemList || []
        this.showLoading = false
      },
    },
    mounted() {

    },
    activated() {
      if (this.$route.name === 'files') {
        return
      }
      let deptTreeId = this.$route.params.deptTreeId
      let roadId = this.$route.params.roadId
      this.refresh(deptTreeId, roadId)
    }
  }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>

  .init_button {
    background-color: #1f2a48;
    border: 1px solid #353f61;
    color: #547aff;
  }
  .init_button_is {
    background-color: #34487f;
    border: 1px solid #353f61;
    color: #547aff;
  }

  // 初始化按钮
  // button 按钮
  @basic-primary: #547AFF;
  @basic-primary-hover: #415DC1;
  @basic-primary-active: #4362CC;
  @basic-primary-disabled: #27366D;
  @basic-black: #000000;

  @basic-font-white: #FFFFFF;
  @basic-font-white-disabled: #CCCCCC;
  @button-primary-icon-bk: #1F2A48;
  @button-primary-icon-bk-hover: #1B2541;
  @button-primary-icon-bk-active: #24325A;
  @button-primary-icon-bk-disabled: #161E37;
  @button-primary-icon-bd: #353F61;
  @button-primary-icon-bd-hover: #2B3452;
  @button-primary-icon-bd-active: #384571;
  @button-primary-icon-bd-disabled: #1D243E;
  @button-primary-icon-font: #547AFF;
  @button-primary-icon-font-hover: #415DC1;
  @button-primary-icon-font-active: #547AFF;
  @button-primary-icon-font-disabled: #26366E;
  .fn_init_button (
    @basic-bk,
    @basic-bk-hover,
    @basic-bk-active,
    @basic-bk-disabled,
    @base-font,
    @basic-font-hover,
    @basic-font-active,
    @basic-font-disabled,
    @button-icon-bk,
    @button-icon-bk-hover,
    @button-icon-bk-active,
    @button-icon-bk-disabled,
    @button-icon-bd,
    @button-icon-bd-hover,
    @button-icon-bd-active,
    @button-icon-bd-disabled,
    @button-icon-font,
    @button-icon-font-hover,
    @button-icon-font-active,
    @button-icon-font-disabled,
  ) {
    background: @basic-bk;
    color: @base-font;
    &:hover {
      background: @basic-bk-hover;
      color: @basic-font-hover;
    }
    &:active {
      background: @basic-bk-active;
      color: @basic-font-active;
    }
    &:disabled {
      background: @basic-bk-disabled;
      color: @basic-font-disabled;
    }
    &.is-plain {
      background: @button-icon-bk;
      border: 1px solid @button-icon-bd;
      color: @button-icon-font;

      &:hover {
        background: @button-icon-bk-hover;
        border: 1px solid @button-icon-bd-hover;
        color: @button-icon-font-hover;
      }

      &:active {
        background: @button-icon-bk-active;
        border: 1px solid @button-icon-bd-active;
        color: @button-icon-font-active;
      }

      &:disabled {
        background: @button-icon-bk-disabled;
        border: 1px solid @button-icon-bd-disabled;
        color: @button-icon-font-disabled;
      }
    }
  }


  .el-button--primary {
    .fn_init_button(
      @basic-primary,
      @basic-primary-hover,
      @basic-primary-active,
      @basic-primary-disabled,
      @basic-font-white,
      @basic-font-white,
      @basic-font-white-disabled,
      @basic-font-white,
      @button-primary-icon-bk,
      @button-primary-icon-bk-hover,
      @button-primary-icon-bk-active,
      @button-primary-icon-bk-disabled,
      @button-primary-icon-bd,
      @button-primary-icon-bd-hover,
      @button-primary-icon-bd-active,
      @button-primary-icon-bd-disabled,
      @button-primary-icon-font,
      @button-primary-icon-font-hover,
      @button-primary-icon-font-active,
      @button-primary-icon-font-disabled,
    )
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 70vh;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .dv_table_left {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 80vh;
  }

  .chart_1 {
    width: 100%;
    height: 30vh;
  }

  .left_paihang {
    overflow: auto;
    height: 40vh
  }

  /*设置小的滚动条样式*/
  .left_paihang::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .left_paihang::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: rgba(93, 255, 246, 1);
  }

  .left_paihang::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }
</style>
